<!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Jia·Wa - shop</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    
    <!-- CSS 
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--owl carousel min css-->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <!--slick min css-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--magnific popup min css-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--font awesome css-->
    <link rel="stylesheet" href="assets/css/font.awesome.css">
    <!--ionicons css-->
    <link rel="stylesheet" href="assets/css/ionicons.min.css">
    <!--simple line icons css-->
    <link rel="stylesheet" href="assets/css/simple-line-icons.css">
    <!--animate css-->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!--jquery ui min css-->
    <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
    <!--slinky menu css-->
    <link rel="stylesheet" href="assets/css/slinky.menu.css">
    <!--plugins css-->
    <link rel="stylesheet" href="assets/css/plugins.css">
    
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    
    <!--modernizr min js here-->
    <script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
    <!--jquery min js-->
    <script src="assets/js/vendor/jquery-3.4.1.min.js"></script>

</head>

<body>

    <!--header area start-->
    
    <!--offcanvas menu area start-->
    <div class="off_canvars_overlay">
                
    </div>
    <%--头部信息--%>
    <header>
        <div id="header">
        </div>
        <script>
            $("#header").load("header.jsp")
        </script>
    </header>

    <!--header area end-->

    <!--breadcrumbs area start-->
    <div class="breadcrumbs_area">
        <div class="container">   
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        <h3>产品列表</h3>
                        <ul>
                            <li><a href="index.jsp">首页</a></li>
                            <li> 家具 & 产品</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>         
    </div>
    <!--breadcrumbs area end-->
    
    <!--shop  area start-->
    <div class="shop_area shop_reverse mb-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    
                    <%--shop toolbar start--%>
                    <div class="shop_toolbar_wrapper">
                        <div class="shop_toolbar_btn">

                            <button data-role="grid_3" type="button" class="active btn-grid-3" data-toggle="tooltip" title="3"></button>

                            <button data-role="grid_4" type="button"  class=" btn-grid-4" data-toggle="tooltip" title="4"></button>

                            <button data-role="grid_list" type="button"  class="btn-list" data-toggle="tooltip" title="List"></button>
                        </div>
                        <div class=" niceselect_option">
                            <form class="select_option" action="/selectAll">
                                <select name="orderby" id="short">
                                    <option  value="1" selected >推荐排序</option>
                                    <option  value="2" >按价格(从高到低)</option>
                                    <option  value="3" >按价格(从低到高)</option>
                                    <option  value="4"  >按销量</option>
                                </select>
                            </form>
                        </div>
<%--                        获取查询结果信息 --%>
                        <div class="page_amount">
                            <p>结果<fmt:formatNumber type="number" value="${pageinfo.total/2}" maxFractionDigits="0"/>个&nbsp;&nbsp;&nbsp;&nbsp;当前展示${pageinfo.size}个商品&nbsp;&nbsp;&nbsp;&nbsp;当前第${pageinfo.pageNum}页</p>
                        </div>
                    </div>

                     <!--shop toolbar end-->

                     <div class="row shop_wrapper">
                         <c:forEach items="${pageinfo.list}" var="goods">
                        <div class="col-lg-4 col-md-4 col-sm-6 col-12 " >
                            <div class="single_product">
                                <div class="product_thumb">
                                    <a class="primary_img" href="product-details.html"><img src="${goods.picList[0].picPath}" height="363" width="330" alt=""></a>
                                    <a class="secondary_img" href="product-details.html"><img src="${goods.picList[1].picPath}" height="363" width="330" alt=""></a>
                                    <div class="label_product">
<%--                                        <span class="label_sale">-20%</span>--%>
                                    </div>
                                    <div class="action_links">
                                        <ul>
                                            <li class="add_to_cart"><a href="cart.jsp" title="Add tob cart"><i class="icon-bag icons"></i></a></li>
                                            <li class="wishlist"><a href="wishlist.jsp" title="Add to Wishlist"><i class="icon-heart icons"></i></a></li>
                                            <li class="compare"><a href="#" title="Add to Compare"><i class="icon-shuffle icons"></i></a></li>
                                            <li class="quick_button"><a href="#" data-toggle="modal" data-target="#modal_box"  title="quick view"> <i class="icon-eye icons"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="product_content grid_content">
                                    <h4 class="product_name"><a href="product-details.html">${goods.sname}</a></h4>
                                    <div class="price_box"> 
                                        <span class="old_price">${goods.sprice+200}</span>
                                        <span class="current_price">${goods.sprice}</span>
                                    </div>
                                    <div class="product_rating">
                                        <ul>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="product_content list_content">
                                    <h4 class="product_name"><a href="product-details.html">${goods.sname}</a></h4>
                                    <div class="price_box"> 
                                        <span class="old_price">${goods.sprice+200}</span>
                                        <span class="current_price">${goods.sprice}</span>
                                    </div>
                                    <div class="product_rating">
                                        <ul>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                            <li><a href="#"><i class="ion-android-star"></i></a></li>
                                        </ul>
                                    </div>
                                    <div class="product_desc">
                                        <p>${goods.summary}</p>
                                    </div>
                                    <div class="product_availability">
                                        <p>库存<span>${goods.stock}</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                         </c:forEach>
                    </div>
                    <div class="shop_toolbar t_bottom">
                        <div class="pagination" id="pagination">
                            <ul>
<%--                                <c:choose>--%>
<%--                                    <c:when test="${pageinfo.pageNum-1>0}">--%>
<%--                                        <li value="${pageinfo.pageNum-1}">--%>
<%--                                            <a href="/selectAll?currentPage=${pageinfo.pageNum-1}">上一页</a>--%>
<%--                                        </li>--%>
<%--                                    </c:when>--%>
<%--                                </c:choose>--%>
                                <c:forEach begin="1" end="${pageinfo.pages}" var="page">
                                    <li value="${page}"><a href="/selectAll?currentPage=${page}">${page}</a></li>
                                </c:forEach>
                                <c:choose>
                                    <c:when test="${pageinfo.pages==0}">
                                        <li value="${pageinfo.pageNum+1}">
                                            <a href="/selectAll?currentPage=${pageinfo.pageNum}">下一页</a>
                                        </li>
                                    </c:when>
                                    <c:when test="${pageinfo.pages+1<pageinfo.pages}">
                                        <li value="${pageinfo.pageNum+1}">
                                            <a href="/selectAll?currentPage=${pageinfo.pageNum+1}">下一页</a>
                                        </li>
                                    </c:when>
                                    <c:otherwise>
                                        <li value="${pageinfo.pages}">
                                            <a href="/selectAll?currentPage=${pageinfo.pages}">尾页</a>
                                        </li>
                                    </c:otherwise>
                                </c:choose>
<%--                                <li class="current" value="1"><a href="#" >1</a></li>--%>
<%--                                <li value="2"><a href="#">2</a></li>--%>
<%--                                <li value="3"><a href="#">3</a></li>--%>
<%--                                <li class="next" value="nextPage"><a href="#">next</a></li>--%>
<%--                                <li value="lastPage"><a href="#">>></a></li>--%>
                            </ul>
                        </div>
                    </div>
                    <!--shop toolbar end-->
                    <!--shop wrapper end-->
                </div>
            </div>
        </div>
    </div>
    <!--shop  area end-->

    <%--页面底部--%>
    <div id="tail">

    </div>
    <script>
        $("#tail").load("tail.jsp");
    </script>


    
<!-- JS
============================================ -->

    <%--条件查询--%>
    <script>
        $(function () {
            $(".list li").click(function () {
                location.href = "/selectAll?sort=" + $(this).attr("data-value");
            })
        })
    </script>
    <%--  status 选框默认选中  --%>
    <script>
        $(function () {
            $("span[class='current']").text($(".list li[data-value=${status}]").text())
        })
    </script>
<!--popper min js-->
<script src="assets/js/popper.js"></script>
<!--bootstrap min js-->
<script src="assets/js/bootstrap.min.js"></script>
<!--owl carousel min js-->
<script src="assets/js/owl.carousel.min.js"></script>
<!--slick min js-->
<script src="assets/js/slick.min.js"></script>
<!--magnific popup min js-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--counterup min js-->
<script src="assets/js/jquery.counterup.min.js"></script>
<!--jquery countdown min js-->
<script src="assets/js/jquery.countdown.js"></script>
<!--jquery ui min js-->
<script src="assets/js/jquery.ui.js"></script>
<!--jquery elevatezoom min js-->
<script src="assets/js/jquery.elevatezoom.js"></script>
<!--isotope packaged min js-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--slinky menu js-->
<script src="assets/js/slinky.menu.js"></script>
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
</body>

</html>